<template>
  <div class="leftInfo">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item v-for="item in lists" :key="item.path">
        <router-link :to="item.path">{{ item.meta.title }}</router-link>
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <div class="rightInfo">
    <!-- <span @click="handleChangeColor">换肤</span> -->
    <div class="changeSkin">
      <template v-for="item in theme" :key="item.color">
        <el-tooltip
          class="box-item"
          effect="light"
          :content="item.name"
          placement="bottom"
        >
          <span
            class="part"
            :style="{ background: item.color }"
            @click="handleChangeColor(item.color)"
          ></span>
        </el-tooltip>
      </template>
    </div>
    <SvgIcon
      class="iconStyle"
      :iconClass="iconName"
      @click="handleScreenfull"
    />
    <el-popover placement="top-start" :width="200" trigger="click">
      <template #reference>
        <div class="user">
          <div class="userPhoto">赵</div>
          <div class="userName">{{ roles[0] }}</div>
        </div>
      </template>
      <div class="setting">
        <div>设置</div>
        <div @click="logouthandle">退出登录</div>
      </div>
    </el-popover>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import screenfull from "screenfull";
import SvgIcon from "@/components/SvgIcon.vue";
export default {
  name: "LayoutHead",
  computed: {
    ...mapGetters(["roles"]),
  },
  created() {
    // this.$route.matched包含当前路由的所有嵌套路径片段的路由记录
    this.lists = this.$route.matched;
    // 初始化页面时根据当前访问路由添加导航标签
    const len = this.$route.matched.length;
    this.$store.dispatch("route/addTabRoutes", this.$route.matched[len - 1]);
  },
  mounted() {
    // 监听全局事件
    screenfull.on("change", () => {
      // icon切换
      this.iconName = screenfull.isFullscreen ? "quxiaoquanping" : "quanping";
    });
  },
  components: { SvgIcon },
  data() {
    return {
      iconName: "quanping",
      lists: [],
      theme: [
        { name: "烈焰红", color: "rgba(229,51,51,1)" },
        { name: "蒂芙尼蓝", color: "rgba(129,216,207,1)" },
        { name: "草木绿", color: "rgba(153,204,51,1)" },
        { name: "天空蓝", color: "rgba(32, 112, 165,1)" },
      ],
    };
  },
  methods: {
    logouthandle() {
      this.$store.dispatch("permission/resetRoutes");
      this.$store.dispatch("user/resetToken");
      location.reload("/login");
    },
    handleScreenfull() {
      if (!screenfull.isEnabled) {
        this.$message({
          message: "不支持全屏",
          type: "warning",
        });
        return false;
      }
      // 全屏/取消全屏切换方法
      screenfull.toggle();
    },
    handleChangeColor(color) {
      this.serStyleProperty(color);
    },
    serStyleProperty(theme) {
      const el = document.documentElement;
      // getComputedStyle(el).getPropertyValue(`--theme-color`); // 换取值
      el.style.setProperty("--theme-color", theme); // 修改值
    },
  },
  watch: {
    $route(to) {
      // 监听路由的变化来添加导航标签
      this.$store.dispatch("route/addTabRoutes", to);
      this.lists = to.matched;
    },
  },
};
</script>

<style scoped lang="css">
.leftInfo {
  width: 50%;
  height: 100%;
  padding-left: 80px;
  box-sizing: border-box;
  float: left;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.leftInfo .el-breadcrumb {
  cursor: pointer;
}

.rightInfo {
  width: 50%;
  height: 100%;
  float: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.rightInfo .user {
  font-size: 16px;
  cursor: pointer;
}
.rightInfo .user .userPhoto {
  width: 40px;
  height: 40px;
  float: left;
  /* background: rgb(12, 130, 199); */
  background: var(--theme-color);
  text-align: center;
  line-height: 40px;
  border-radius: 50px;
  color: #fff;
}

.rightInfo .user .userName {
  width: 80px;
  height: 40px;
  line-height: 40px;
  color: #1c1c1c;
  text-align: left;
  padding: 0 0 0 8px;
  float: left;
}

.setting div {
  height: 30px;
  line-height: 30px;
  cursor: pointer;
}

.iconStyle {
  width: 35px;
  height: 35px;
  padding: 0 10px;
  color: rgba(51, 51, 51, 0.8);
  cursor: pointer;
}

.iconStyle:hover {
  color: rgba(51, 51, 51, 1);
}
.changeSkin {
  width: 200px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  box-sizing: border-box;
}
.changeSkin .part {
  width: 30px;
  height: 30px;
  border-radius: 4px;
  display: inline-block;
  cursor: pointer;
}
</style>
